[Style] Add custom scrollbar styling for SelectBox components #5879

viva-jinyi · 2025-10-01T12:29:00Z

Summary

Added custom scrollbar styling for SelectBox components (SingleSelect and MultiSelect) to improve visual consistency across the application.

Changes

🎨 Added custom scrollbar CSS with cross-browser support (WebKit, Firefox)
🎨 Implemented dark theme support for scrollbars
🎨 Applied .custom-scrollbar class to SingleSelect and MultiSelect components
🎨 Added CSS variables for scrollbar theming

Implementation Details

Custom scrollbar size: 10px
Light theme: Gray scrollbar on white track
Dark theme: Dark gray scrollbar on charcoal track
Smooth hover transitions for better UX

Browser Support

✅ Chrome/Edge (WebKit scrollbar)
✅ Firefox (scrollbar-width and scrollbar-color)
✅ Safari (WebKit scrollbar)

Screenshots

The custom scrollbar provides a more modern and consistent look across the application, especially in dropdown menus.

Testing

Test scrollbar appearance in light theme
Test scrollbar appearance in dark theme
Verify functionality in Chrome/Edge
Verify functionality in Firefox
Verify functionality in Safari

Before

After

┆Issue is synchronized with this Notion page by Unito

github-actions · 2025-10-01T12:29:18Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 10/23/2025, 01:56:22 PM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

github-actions · 2025-10-01T12:29:26Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 10/23/2025, 02:12:01 PM UTC

📈 Summary

Total Tests: 496
Passed: 460 ✅
Failed: 0
Flaky: 5 ⚠️
Skipped: 31 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 451 / ❌ 0 / ⚠️ 5 / ⏭️ 31
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 6 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

packages/design-system/src/css/style.css

src/components/input/MultiSelect.vue

claude

Comprehensive PR Review

This review is generated by Claude. It may not always be accurate, as with human reviewers. If you believe that any of the comments are invalid or incorrect, please state why for each. For others, please implement the changes in one way or another.

Review Summary

PR: [Style] Add custom scrollbar styling for SelectBox components (#5879)
Impact: 76 additions, 2 deletions across 3 files

Issue Distribution

Critical: 0
High: 1
Medium: 4
Low: 2

Category Breakdown

Architecture: 3 issues
Code Quality: 3 issues
Performance: 1 issue

Key Findings

Architecture & Design

The implementation follows a reasonable approach for cross-browser scrollbar styling, but has some architectural inconsistencies. The PR introduces custom CSS components rather than following the existing Tailwind utility pattern used by scrollbar-hide. Additionally, the migration is incomplete - 8 other files still use scrollbar-hide, creating inconsistency across the application.

Code Quality Considerations

The main quality concern is the use of an undefined CSS color token (--color-white) which will cause fallbacks to browser defaults. The scrollbar hover behavior is also inconsistent in light theme where hover and normal states use the same color.

Performance Impact

The CSS includes scrollbar-gutter: stable both-edges which could cause layout shifts on browsers with inconsistent support. However, this is marked as low priority since it's ignored on unsupported browsers.

Integration Points

The Vue component changes are clean and maintain proper separation of concerns. The class replacement from scrollbar-hide to custom-scrollbar follows Vue best practices.

Positive Observations

Comprehensive cross-browser support with both WebKit and Firefox implementations
Well-documented CSS with clear usage instructions
Clean Vue component implementation with proper class replacement
Good use of CSS custom properties for theming
Responsive design considerations for dark theme support

References

Repository Architecture Guide
ComfyUI Frontend Guidelines (CLAUDE.md) - emphasizes Tailwind utility-first approach

Next Steps

Address the undefined color token issue (high priority)
Consider completing the scrollbar migration across all components
Evaluate whether to implement as Tailwind utility for consistency
Test scrollbar behavior across target browsers
Fix hover state inconsistency in light theme

This is a comprehensive automated review. The scrollbar implementation provides good user experience improvements, but addressing the color token and architectural consistency issues will improve maintainability.

arjansingh

The scrollbar-gutter comment is incorrect, but i think the other Claude comments are worth investigating.

packages/design-system/src/css/style.css

viva-jinyi · 2025-10-11T12:42:52Z

I wanted to make all browsers display an identical scrollbar style controlled entirely by CSS, but it turns out Safari doesn’t allow a fully consistent implementation.
The track background color and the left divider line come from Safari’s overlay scroll behavior and its native rendering logic, so they can’t be completely removed with CSS.

To achieve pixel-perfect consistency across browsers, the only real option would be to hide the native scrollbar and build a custom overlay scrollbar (JS-based).

What do you all think?
Should we just remove the scrollbar entirely in SelectBox for simplicity, or keep this approach even if Safari’s rendering isn’t 100% identical?

christian-byrne · 2025-10-11T17:22:23Z

@viva-jinyi Have you done custom scrollbar before? I have found it to be quite hard when not using a library, as there are many edge cases and relying on layout is hard.

If we can't reach a satisfying solution here, should we try the other options from previous discussions?

https://primevue.org/scrollpanel/
Overflow into new columns (Alex suggestion)

github-actions · 2025-10-22T22:09:03Z

Bundle Size Report

Summary

Raw size: 12.5 MB baseline 12.5 MB — 🟢 -28 B
Gzip: 2.54 MB baseline 2.54 MB — 🔴 +9 B
Brotli: 2 MB baseline 2 MB — 🟢 -319 B
Bundles: 56 current • 56 baseline • 12 added / 12 removed

Category Glance
App Entry Points 🟢 -28 B (3.31 MB) · Vendor & Third-Party ⚪ 0 B (5.36 MB) · Other ⚪ 0 B (2.79 MB) · Graph Workspace ⚪ 0 B (707 kB) · Panels & Settings ⚪ 0 B (294 kB) · UI Components ⚪ 0 B (12.3 kB) · + 3 more

Per-category breakdown

App Entry Points — 3.31 MB (baseline 3.31 MB) • 🟢 -28 B

_Main entry bundles and manifests_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ---------------------------------------- | ------ | ------ | ---------------------- | ---------------------- | ----------------------- | | ~~assets/index-2xVrPvKM.js~~ _(removed)_ | 2.7 MB | — | 🟢 -2.7 MB | 🟢 -561 kB | 🟢 -425 kB | | **assets/index-B3Z38Taa.js** _(new)_ | — | 2.7 MB | 🔴 +2.7 MB | 🔴 +561 kB | 🔴 +424 kB | | **assets/index-BdocymKh.js** _(new)_ | — | 616 kB | 🔴 +616 kB | 🔴 +114 kB | 🔴 +90.2 kB | | ~~assets/index-DkvsVA7e.js~~ _(removed)_ | 616 kB | — | 🟢 -616 kB | 🟢 -114 kB | 🟢 -90.3 kB |

Status: 2 added / 2 removed

Graph Workspace — 707 kB (baseline 707 kB) • ⚪ 0 B

_Graph editor runtime, canvas, workflow orchestration_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | -------------------------------------------- | ------ | ------ | ---------------------- | ---------------------- | ---------------------- | | **assets/GraphView-BL7bOoJo.js** _(new)_ | — | 707 kB | 🔴 +707 kB | 🔴 +138 kB | 🔴 +107 kB | | ~~assets/GraphView-Dp0nx65Z.js~~ _(removed)_ | 707 kB | — | 🟢 -707 kB | 🟢 -139 kB | 🟢 -107 kB |

Status: 1 added / 1 removed

Views & Navigation — 8.15 kB (baseline 8.15 kB) • ⚪ 0 B

_Top-level views, pages, and routed surfaces_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ------------------------------------------------- | ------- | ------- | ----------------------- | ----------------------- | ----------------------- | | ~~assets/UserSelectView-BMqj_OXk.js~~ _(removed)_ | 8.15 kB | — | 🟢 -8.15 kB | 🟢 -2.47 kB | 🟢 -2.16 kB | | **assets/UserSelectView-BySOTR0p.js** _(new)_ | — | 8.15 kB | 🔴 +8.15 kB | 🔴 +2.47 kB | 🔴 +2.16 kB |

Status: 1 added / 1 removed

Panels & Settings — 294 kB (baseline 294 kB) • ⚪ 0 B

_Configuration panels, inspectors, and settings screens_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ---------------------------------------------------- | ------- | ------- | ----------------------- | ----------------------- | ----------------------- | | ~~assets/CreditsPanel-C6VTZTDy.js~~ _(removed)_ | 22.1 kB | — | 🟢 -22.1 kB | 🟢 -5.28 kB | 🟢 -4.6 kB | | **assets/CreditsPanel-DIFkxNlu.js** _(new)_ | — | 22.1 kB | 🔴 +22.1 kB | 🔴 +5.28 kB | 🔴 +4.61 kB | | **assets/KeybindingPanel-CMGZrC2N.js** _(new)_ | — | 15.2 kB | 🔴 +15.2 kB | 🔴 +3.76 kB | 🔴 +3.31 kB | | ~~assets/KeybindingPanel-fxuJ75NL.js~~ _(removed)_ | 15.2 kB | — | 🟢 -15.2 kB | 🟢 -3.76 kB | 🟢 -3.32 kB | | ~~assets/ExtensionPanel-Db56u6oN.js~~ _(removed)_ | 12.1 kB | — | 🟢 -12.1 kB | 🟢 -2.83 kB | 🟢 -2.48 kB | | **assets/ExtensionPanel-Dy-Lq9zX.js** _(new)_ | — | 12.1 kB | 🔴 +12.1 kB | 🔴 +2.83 kB | 🔴 +2.48 kB | | ~~assets/AboutPanel-CC2yaYtu.js~~ _(removed)_ | 10.3 kB | — | 🟢 -10.3 kB | 🟢 -2.66 kB | 🟢 -2.35 kB | | **assets/AboutPanel-CXOjxM3D.js** _(new)_ | — | 10.3 kB | 🔴 +10.3 kB | 🔴 +2.67 kB | 🔴 +2.35 kB | | ~~assets/ServerConfigPanel-D1MxsM4G.js~~ _(removed)_ | 8.2 kB | — | 🟢 -8.2 kB | 🟢 -2.16 kB | 🟢 -1.9 kB | | **assets/ServerConfigPanel-pJuF1oj_.js** _(new)_ | — | 8.2 kB | 🔴 +8.2 kB | 🔴 +2.16 kB | 🔴 +1.89 kB | | **assets/UserPanel-BDBFvuBS.js** _(new)_ | — | 7.91 kB | 🔴 +7.91 kB | 🔴 +2.06 kB | 🔴 +1.79 kB | | ~~assets/UserPanel-lu3r7PhH.js~~ _(removed)_ | 7.91 kB | — | 🟢 -7.91 kB | 🟢 -2.06 kB | 🟢 -1.8 kB | | assets/settings-B-df0dZe.js | 20.7 kB | 20.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-CI6OKvJn.js | 22.9 kB | 22.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-CXGVj_nD.js | 24.5 kB | 24.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DfQ6dSJj.js | 31.6 kB | 31.6 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DJ2QgDzm.js | 25.2 kB | 25.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DRNLPMG6.js | 23.7 kB | 23.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-DVVycxDc.js | 19.9 kB | 19.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-G6Dybj1b.js | 24.1 kB | 24.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/settings-M6_GZccG.js | 26 kB | 26 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

Status: 6 added / 6 removed

UI Components — 12.3 kB (baseline 12.3 kB) • ⚪ 0 B

_Reusable component library chunks_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ----------------------------------------------------------------- | ------- | ------- | ----------------------- | ----------------------- | ----------------------- | | ~~assets/ComfyQueueButton-CyT7eJ5m.js~~ _(removed)_ | 11.1 kB | — | 🟢 -11.1 kB | 🟢 -2.76 kB | 🟢 -2.44 kB | | **assets/ComfyQueueButton-ooACLtcW.js** _(new)_ | — | 11.1 kB | 🔴 +11.1 kB | 🔴 +2.76 kB | 🔴 +2.44 kB | | assets/UserAvatar.vue_vue_type_script_setup_true_lang-C9bSkTC5.js | 1.12 kB | 1.12 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

Status: 1 added / 1 removed

Data & Services — 10 kB (baseline 10 kB) • ⚪ 0 B

_Stores, services, APIs, and repositories_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | ---------------------------------------------------- | ------- | ------- | ----------------------- | ----------------------- | ---------------------- | | **assets/keybindingService-C_X8j2B7.js** _(new)_ | — | 7.21 kB | 🔴 +7.21 kB | 🔴 +1.75 kB | 🔴 +1.51 kB | | ~~assets/keybindingService-CfcXnYWW.js~~ _(removed)_ | 7.21 kB | — | 🟢 -7.21 kB | 🟢 -1.75 kB | 🟢 -1.5 kB | | assets/serverConfigStore-BE22gWlb.js | 2.79 kB | 2.79 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

Status: 1 added / 1 removed

Utilities & Hooks — 1.07 kB (baseline 1.07 kB) • ⚪ 0 B

_Helpers, composables, and utility bundles_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/mathUtil-CTARWQ-l.js | 1.07 kB | 1.07 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

Vendor & Third-Party — 5.36 MB (baseline 5.36 MB) • ⚪ 0 B

_External libraries and shared vendor chunks_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/vendor-other-DUFQbqPR.js | 3.22 MB | 3.22 MB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-primevue-PESgPnbc.js | 517 B | 517 B | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-tiptap-DrFxugC4.js | 232 kB | 232 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-visualization-BEfdbjRw.js | 1.82 MB | 1.82 MB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/vendor-vue-DJFUVoPA.js | 92.4 kB | 92.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

Other — 2.79 MB (baseline 2.79 MB) • ⚪ 0 B

_Bundles that do not match a named category_ | File | Before | After | Δ Raw | Δ Gzip | Δ Brotli | | --------------------------- | ------- | ------- | ------------------ | ------------------ | ------------------ | | assets/commands-B2KZRBmX.js | 15.1 kB | 15.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-Bw-ckyga.js | 13.9 kB | 13.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-C_NmM85I.js | 13.8 kB | 13.8 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-CuozCW4W.js | 14 kB | 14 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-DGfVUJCR.js | 16.2 kB | 16.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-dOJNDogK.js | 14.5 kB | 14.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-DwiE551e.js | 14.7 kB | 14.7 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-Fw7mvqSy.js | 13.1 kB | 13.1 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/commands-FXnO1W4Q.js | 13.2 kB | 13.2 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-6UgCUkrV.js | 108 kB | 108 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BfHN1fzx.js | 125 kB | 125 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BhulUfFD.js | 77.5 kB | 77.5 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-BPHe683n.js | 92.4 kB | 92.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-C75C4LWt.js | 90.9 kB | 90.9 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CEhf19j2.js | 99.4 kB | 99.4 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CipazGd8.js | 79.3 kB | 79.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-CKz_lTAz.js | 94.3 kB | 94.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/main-Dzm38Va4.js | 90.3 kB | 90.3 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BePSqkA4.js | 195 kB | 195 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BfT7dJcF.js | 204 kB | 204 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-BiAtoiXc.js | 194 kB | 194 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CDfbduPY.js | 219 kB | 219 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CDurg_KW.js | 197 kB | 197 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-CE-vG3RG.js | 182 kB | 182 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-DAwVV156.js | 200 kB | 200 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-DexhCMEi.js | 233 kB | 233 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B | | assets/nodeDefs-kTrYLFPK.js | 184 kB | 184 kB | ⚪ 0 B | ⚪ 0 B | ⚪ 0 B |

DrJKL · 2025-10-22T22:10:09Z

packages/design-system/src/css/style.css

+}
+/* =================== End Custom Scrollbar (cross-browser) =================== */
+
+/* Everthing below here to be cleaned up over time. */


Suggested change

/* Everthing below here to be cleaned up over time. */

/* Everything below here to be cleaned up over time. */

dosubot bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Oct 1, 2025

christian-byrne added the claude-review Add to trigger a PR code review from Claude Code label Oct 1, 2025